<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:replace="fragment/head"/>
    <link href="resources/assets/global/plugins/datatables/datatables.min.css" rel="stylesheet"/>
    <link href="resources/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet"/>
</head>

<body class="page-header-fixed page-sidebar-closed-hide-logo page-container-bg-solid page-content-white page-sidebar-closed">
<th:block th:with="
    ERPConstants = ${T(com.sh.caryr.erp.util.ERPConstants)} ,
    authTarget = ${ERPConstants.AUTH_TARGET_USER} ,
    layout = ${T(com.sh.caryr.erp.custmz.LayoutContainer).getLayout(authTarget, session.user)},
    createAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_CREATE},
    deleteAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_DELETE},
    updateAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_UPDATE}
">
    <th:block th:replace="fragment/header"/>
    <div class="page-container">
        <th:block th:replace="fragment/sidebar"/>
        <div class="page-content-wrapper">
            <div class="page-content">
                <!-- BEGIN PAGE BAR -->
                <div class="page-bar">
                    <ul class="page-breadcrumb">
                        <li><a href="dashboard" class='msg_home'>控制台</a> <i class="fa fa-circle"></i></li>
                        <li><span class='msg_stock_management'>库存管理</span></li>
                    </ul>
                </div>
                <div class="row">
                    <!-- BEGIN ===========page level content============= -->
                    <div class="col-md-12">
                        <!--======== Stock Chart  ========-->
                        <div id="stockChart" class="portlet light ">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="icon-bar-chart font-green-haze"></i>
                                    <span class="caption-subject bold uppercase font-green-haze">当前库存</span>
                                </div>
                                <div class="tools">
                                    <a href="javascript:;" class="collapse" data-original-title="" title=""> </a>
                                    <a href="javascript:;" class="fullscreen" data-original-title="" title="全屏">
                                        <i class="fa fa-arrows-alt"></i>
                                    </a>
                                    <a href="javascript:;" class="remove" data-original-title="" title=""> </a>
                                </div>
                            </div>
                            <div class="portlet-body ">
                                <div id="stock_amchart_1" class="CSSAnimationChart"></div>
                            </div>
                        </div>
                        <!--======== Stock List  ========-->
                        <div class="portlet box green datatable-portlet">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="fa fa-list"></i><span class=''>库存列表</span>
                                </div>
                                <div class="tools">
                                    <button th:if="${ session.isSuperUser||session.authStr.contains(deleteAuth)}"
                                            id="btn_del_entity" class="btn sbold green" title="删除">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                    <button id="btn_refresh_dt" class="btn sbold green">
                                        <i class="fa icon-refresh"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <table class="table table-striped table-bordered table-hover dt-responsive"
                                       id="dt_sku" cellspacing="0" width="100%">
                                    <thead>
                                    <tr>
                                        <th width="2%"><label
                                                class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                            <input type="checkbox" class="group-checkable"
                                                   data-set="#dt_sku .checkboxes"/> <span></span>
                                        </label></th>
                                        <th width='' class='msg_ent_fld_img'></th>
                                        <th width='' class='msg_ent_fld_name'></th>
                                        <th width='' class='msg_ent_fld_code'></th>
                                        <th width='' class='msg_ent_fld_attr1'></th>
                                        <th width='' class='msg_ent_fld_attr2'></th>
                                        <th width='' class='msg_ent_fld_totalAmount'></th>
                                        <th width='' class='msg_ent_fld_usableAmount'></th>
                                        <th width='' class='msg_ent_fld_notGoodAmount'></th>
                                        <th width='' class='msg_ent_fld_lockedAmount'></th>
                                        <th width='' class='msg_ent_fld_status'></th>
                                        <th width="2%"></th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!--======== Detail Modal Form  ========-->
                    <div id="detailModal" class="formModal modal fade" tabindex="-1"
                         role="basic" aria-hidden="true" style="display: none;">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"
                                            aria-hidden="true"></button>
                                    <h4 class="modal-title">修改库存</h4>
                                </div>
                                <div class="modal-body">
                                    <!-- BEGIN Error Message -->
                                    <div class="alert alert-danger hidden" id="form_error_msg">
                                        <button type="button" class="close" data-dismiss="alert"
                                                aria-hidden="true"></button>
                                        <strong class="msg_err_title"></strong>
                                        <span class="msg_err_subTitle"> </span>
                                    </div>
                                    <form role="form" id='sku_edit_form'>
                                        <div class="form-body">
                                            <div class='row display_data'>
                                                <div class='form-group col-md-6 col-sm-12 col-xs-12 has-success '>
                                                    <label class='control-label col-md-4 msg_ent_fld_name'></label>
                                                    <div class='col-md-8'>
                                                        <p class='form-control-static' name="name"></p>
                                                    </div>
                                                </div>
                                                <div class='form-group col-md-6 col-sm-12 col-xs-12 has-success '>
                                                    <label class='control-label col-md-5 msg_ent_fld_code'></label>
                                                    <div class='col-md-7'>
                                                        <p class='form-control-static' name="code"></p>
                                                    </div>
                                                </div>
                                                <div class='form-group col-md-6 col-sm-12 col-xs-12 has-success '>
                                                    <label class='control-label col-md-5 msg_ent_fld_attr1'></label>
                                                    <div class='col-md-7'>
                                                        <p class='form-control-static' name="attribute1"></p>
                                                    </div>
                                                </div>
                                                <div class='form-group col-md-6 col-sm-12 col-xs-12 has-success '>
                                                    <label class='control-label col-md-5 msg_ent_fld_attr2'></label>
                                                    <div class='col-md-7'>
                                                        <p class='form-control-static' name="attribute2"></p>
                                                    </div>
                                                </div>
                                                <div class='form-group col-md-6 col-sm-12 col-xs-12 has-success '>
                                                    <label class='control-label col-md-4 msg_ent_fld_updateAt'></label>
                                                    <div class='col-md-8'>
                                                        <p class='form-control-static' name="updateAt"></p>
                                                    </div>
                                                </div>
                                                <div class='form-group col-md-6 col-sm-12 col-xs-12 has-success '>
                                                    <label class='control-label col-md-4 msg_ent_fld_createAt'></label>
                                                    <div class='col-md-8'>
                                                        <p class='form-control-static' name="createAt"></p>
                                                    </div>
                                                </div>
                                            </div>
                                            <h3 class="form-break">&nbsp;</h3>
                                            <div class='row edit_data'>
                                                <input class='hidden' type='text' name='id'/>
                                                <input class='hidden' type='text' name='name'/>
                                                <input class='hidden' type='text' name='code'/>
                                                <div class='form-group col-md-6 col-sm-12 col-xs-12 has-success '>
                                                    <label class='col-md-12 control-label msg_ent_fld_usableAmount'></label>
                                                    <div class='col-md-12'>
                                                        <div class='input-group'>
                                                            <input type='number' class='form-control'
                                                                   name='usableAmount'
                                                                   maxlength="10">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class='form-group col-md-6 col-sm-12 col-xs-12 has-success '>
                                                    <label class='col-md-12 control-label msg_ent_fld_notGoodAmount'></label>
                                                    <div class='col-md-12'>
                                                        <div class='input-group'>
                                                            <input type='number' class='form-control'
                                                                   name='notGoodAmount'
                                                                   maxlength="10">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class='form-group col-md-6 col-sm-12 col-xs-12 has-success '>
                                                    <label class='col-md-12 control-label msg_ent_fld_lockedAmount'></label>
                                                    <div class='col-md-12'>
                                                        <div class='input-group'>
                                                            <input type='number' class='form-control'
                                                                   name='lockedAmount'
                                                                   maxlength="10">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-12 col-sm-12 col-xs-12 has-success ">
                                                    <label class="col-md-12 control-label caryr-required ">操作备注</label>
                                                    <div class="col-md-12">
                                                        <div class="input-group">
                                                        <textarea class="form-control" name="remark"
                                                                  maxlength="100"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class='form-group col-md-12 col-sm-12 col-xs-12 has-success '>
                                                    <label class="col-md-3 control-label msg_ent_fld_status">Company
                                                        Superuser</label>
                                                    <div class="col-md-9">
                                                        <div class="mt-radio-inline">
                                                            <label class="mt-radio active mt-radio-disabled">
                                                                <input type="radio" name="status" value="1"
                                                                       disabled=""/>
                                                                <i class="radio-label msg_ent_fld_sku_status_nom"
                                                                   checked="checked">Normal</i>
                                                                <span></span>
                                                            </label>
                                                            <label class="mt-radio mt-radio-disabled">
                                                                <input type="radio" name="status" value="2"
                                                                       disabled=""/>
                                                                <i class="radio-label msg_ent_fld_sku_status_warn ">Warning</i>
                                                                <span></span>
                                                            </label>
                                                            <label class="mt-radio mt-radio-disabled">
                                                                <input type="radio" name="status" value="3"
                                                                       disabled=""/>
                                                                <i class="radio-label msg_ent_fld_sku_status_empty ">Empty </i>
                                                                <span></span>
                                                            </label>
                                                            <label class="mt-radio mt-radio-disabled">
                                                                <input type="radio" name="status" value="4"
                                                                       disabled=""/>
                                                                <i class="radio-label msg_ent_fld_sku_status_presale ">Pre
                                                                    Sale</i>
                                                                <span></span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn green msg_com_formSave" id="btn_edit_form_save">保存
                                    </button>
                                    <button type="button" data-dismiss="modal"
                                            class="btn grey-salsa btn-outline msg_com_formReturn"
                                            id="btn_edit_form_return">返回
                                    </button>
                                </div>
                            </div>
                        </div>
                        <!-- /.modal-dialog -->
                    </div>
                    <!-- END   ===========page level content============= -->
                </div>
            </div>
        </div>
    </div>
    <th:block th:replace="fragment/rear"/>
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <script src="resources/assets/global/plugins/datatables/datatables.min.js"></script>
    <script src="resources/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js"></script>
    <script src="resources/assets/global/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js"></script>
    <script src="resources/assets/caryr/caryr.datatable.js" type="text/javascript"></script>
    <!-- ======== Amchart dependency === -->
    <script src="resources/assets/global/plugins/morris/morris.min.js"></script>
    <!-- ======== Amchart ============== -->
    <script src="resources/assets/global/plugins/amcharts/amcharts/amcharts.js"></script>
    <script src="resources/assets/global/plugins/amcharts/amcharts/serial.js"></script>
    <script src="resources/assets/global/plugins/amcharts/amcharts/lang/cn.js"></script>
    <script src="resources/assets/pages/amChartInit.js"></script>
    <script th:inline="javascript">
        jQuery(document).ready(function () {

            /*[+
            caryr.lang = [[${session.lang}]];
            +]*/

            var tableId = '#dt_sku',
                formId = '#sku_edit_form';
            /***************** Stock Amchart **************/
            caryr.loadData({
                url: 'api/sku?size=-1',
                callback: function (data) {
                    if (data && data.data) {
                        Dashboard.initStockChart("stock_amchart_1", data.data);
                    }
                }
            });

            /***************** Data table **************/
            var dataTable = caryr.dataTable.create({
                url: "api/sku",
                defaultOrderBy: 3,
                tableId: tableId,
                lang: caryr.lang,
                pageLength: 10,
                columns: [
                    {
                        data: 'img',
                        "orderable": false,
                        render: function (e, n) {
                            if (!e) {
                                e = 'images/empty-product-img.png'
                            }
                            return '<img src=' + e + ' class="dt-img">'
                        }
                    },
                    {data: 'name'},
                    {data: 'code'},
                    {data: 'attribute1'},
                    {data: 'attribute2'},
                    {
                        orderable: false,
                        class: 'totalAmount',
                        render: function (data, type, row) {
                            var total = row.usableAmount + row.lockedAmount + row.notGoodAmount;
                            return caryr.stock.stockTotoalQuantityHtml(total);
                        }
                    },
                    {
                        data: 'usableAmount',
                        render: function (e) {
                            e = e ? e : 0;
                            var html = '<span name="usableAmount" class="inline_display">' + e + '</span>';
                            html += '<input type="number" class="inline_input hidden form-control" name="usableAmount" value="' + e + '"/>';
                            return html;
                        }
                    },
                    {
                        data: 'notGoodAmount',
                        render: function (e) {
                            e = e ? e : 0;
                            var html =
                                '<span name="notGoodAmount" class="inline_display">' + e + '</span>' +
                                '<input type="number" class="inline_input hidden form-control" name="notGoodAmount" value="' + e + '"/>';
                            return html;
                        }
                    },
                    {
                        data: 'lockedAmount',
                        render: function (e) {
                            e = e ? e : 0;
                            var html =
                                '<span name="lockedAmount" class="inline_display">' + e + '</span>' +
                                '<input type="number" class="inline_input hidden form-control" name="lockedAmount" value="' + e + '"/>';
                            return html;
                        }
                    },
                    {
                        data: 'status',
                        render: function (e) {
                            return "<span class='msg_ent_fld_stockstd_" + e + "'></span>";
                        }
                    },
                ],
                enableInlineEdit: true,
                onInlineSave: function (data, e) {
                    inlineSave(data, e);
                }
            });

            $('#btn_add_entity').on('click', function () {	//attach create entity
                caryr.refreshEditForm({}, true, formId);
                $('#detailModal').modal('show');
            });

            /***************** Edit form **************/
            caryr.getFormInstatnce('sku_edit_form', {
                url: 'api/sku',
                validateForm: function (formResult, form) {
                    if (!formResult) {
                        $('#detailModal').modal('show');
                    } else {
                        $('#detailModal').modal('hide');
                    }
                    return formResult;
                },
                afterSaveSuccess: function (data, action) {
                    var id = action == "POST" ? data.data : data.data.id;
                    if (id) {
                        this.form.find('.edit_data input[name="id"]').val(id);
                        dataTable.draw();
                        caryr.showTab('#tab_li_entity_list');
                    } else {
                        swal({
                            title: $.i18n.prop("msg_com_systemError"),
                            text: "",
                            type: "error"
                        });
                    }
                },
                afterSaveAndNewSuccess: function (data, action) {
                }
            });

            /***************** Function **************/
            function inlineSave(data, e) {
                var rowEle = $(e).closest('tr');
                var entity = caryr.collectEntity(rowEle);
                data.usableAmount = entity.usableAmount;
                data.notGoodAmount = entity.notGoodAmount;
                data.lockedAmount = entity.lockedAmount;
                caryr.ajaxReq({
                    url: "api/sku",
                    type: "PUT",
                    data: data,
                    success: function () {
                        caryr.updateInlineProp(rowEle, "usableAmount", data.usableAmount);
                        caryr.updateInlineProp(rowEle, "notGoodAmount", data.notGoodAmount);
                        caryr.updateInlineProp(rowEle, "lockedAmount", data.lockedAmount);
                        var total = Number(data.usableAmount) + Number(data.notGoodAmount) + Number(data.lockedAmount);
                        rowEle.find('.totalAmount').html(caryr.stock.stockTotoalQuantityHtml(total));
                    }
                });
            }
        });
    </script>
</th:block>
</body>